<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- Favicon -->
       <link rel="shortcut icon" th:href="@{/xray/images/favicon.ico}" />
       <!-- Bootstrap CSS -->
       <link rel="stylesheet" th:href="@{/xray/css/bootstrap.min.css}">
       <!-- Typography CSS -->
       <link rel="stylesheet" th:href="@{/xray/css/typography.css}">
       <!-- Style CSS -->
       <link rel="stylesheet" th:href="@{/xray/css/style.css}">
       <!-- Responsive CSS -->
       <link rel="stylesheet" th:href="@{/xray/css/responsive.css}">

       <style>
           .my-mouse-img {
               position: absolute;
               z-index: 999;
           }
       </style>
   </head>
   <body>

   <img class="my-mouse-img" src="imgs/mouse-logo.jpg" alt="" width="60px">
   <script>
       document.addEventListener('mousemove', function (e) {
           //鼠标只要移动,就会触发事件
           var x = e.pageX;
           var y = e.pageY;
           var pic = document.querySelector('img');
           pic.style.left = x-20+'px';
           pic.style.top = y-40+'px';
       })
   </script>

   <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
        <!-- Sign in Start -->
        <section class="sign-in-page">
            <div class="container sign-in-page-bg mt-5 p-0">
                <div class="row no-gutters">
                    <div class="col-md-6 text-center">
                        <div class="sign-in-detail text-white">
                            <a class="sign-in-logo mb-5" href="#"><img th:src="@{/xray/images/logo-white.png}" class="img-fluid"></a>
                            <div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true" data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1" data-items-mobile-sm="1" data-margin="0">
                                <div class="item">
                                    <img th:src="@{/xray/images/login/1.png}" class="img-fluid mb-4" alt="logo">
                                    <h4 class="mb-1 text-white">欢迎注册</h4>
                                    <p>欢迎来到教育局民办教育信息服务监督平台</p>
                                </div>
                                <div class="item">
                                    <img th:src="@{/xray/images/login/2.png}" class="img-fluid mb-4" alt="logo">
                                    <h4 class="mb-1 text-white">欢迎注册</h4>
                                    <p>欢迎来到教育局民办教育信息服务监督平台</p>
                                </div>
                                <div class="item">
                                    <img th:src="@{/xray/images/login/3.png}" class="img-fluid mb-4" alt="logo">
                                    <h4 class="mb-1 text-white">欢迎注册</h4>
                                    <p>欢迎来到教育局民办教育信息服务监督平台</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 position-relative">
                        <div style="padding: 20px 60px; border-radius: 37px; position: absolute; top: 6%; bottom: 6%; left: 0; right: 0; background: #fff; ">
                            <form  th:action="@{/register}">
                                <div class="form-group">
                                    <h1>注册</h1>
                                    <label >用户名</label>
                                    <input type="text" class="form-control mb-0"  placeholder="请输入用户名" name="username">
                                    <p style="color: #c92837" th:text="${msg2}" th:if="${not #strings.isEmpty(msg2)}"></p>
                                </div>
                                <div class="form-group">
                                    <label >密码</label>
                                    <input type="text" class="form-control mb-0" placeholder="请输入密码" name="password">
                                </div>
                                <div class="form-group">
                                    <label >密码</label>
                                    <input type="password" class="form-control mb-0"  placeholder="请再次输入密码" name="password_check">
                                    <p style="color: #a71d2a" th:text="${msg1}" th:if="${not #strings.isEmpty(msg1)}"></p>
                                </div>
                                <div class="form-group">
                                    <label >密保问题</label>
                                    <input type="text" class="form-control mb-0" name="question" placeholder="请输入问题">
                                </div>
                                <div class="form-group">
                                    <label >密保答案</label>
                                    <input type="text" class="form-control mb-0" name="answer" placeholder="请输入答案">
                                </div>
                                <div class="d-inline-block w-100">
<!--                                    <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">-->
<!--                                        <input type="checkbox" class="custom-control-input" id="customCheck1">-->
<!--                                        <label class="custom-control-label" for="customCheck1">我接受 <a href="#">条款和条件</a></label>-->
<!--                                    </div>-->
                                    <span class="dark-color d-inline-block line-height-2">已有帐户？<a href="/signin">登录</a></span>
                                    <button type="submit" class="btn btn-primary float-right">注册</button>
                                </div>
<!--                                <div class="sign-info">-->
<!--                                    <span class="dark-color d-inline-block line-height-2">已有帐户？<a th:href="@{/templates/sign-in.html}">登录</a></span>-->
<!--                                </div>-->
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Sign in END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script th:src="@{/xray/js/jquery.min.js}"></script>
      <script th:src="@{/xray/js/popper.min.js}"></script>
      <script th:src="@{/xray/js/bootstrap.min.js}"></script>
      <!-- Appear JavaScript -->
      <script th:src="@{/xray/js/jquery.appear.js}"></script>
      <!-- Countdown JavaScript -->
      <script th:src="@{/xray/js/countdown.min.js}"></script>
      <!-- Counterup JavaScript -->
      <script th:src="@{/xray/js/waypoints.min.js}"></script>
      <script th:src="@{/xray/js/jquery.counterup.min.js}"></script>
      <!-- Wow JavaScript -->
      <script th:src="@{/xray/js/wow.min.js}"></script>
      <!-- Apexcharts JavaScript -->
      <script th:src="@{/xray/js/apexcharts.js}"></script>
      <!-- Slick JavaScript -->
      <script th:src="@{/xray/js/slick.min.js}"></script>
      <!-- Select2 JavaScript -->
      <script th:src="@{/xray/js/select2.min.js}"></script>
      <!-- Owl Carousel JavaScript -->
      <script th:src="@{/xray/js/owl.carousel.min.js}"></script>
      <!-- Magnific Popup JavaScript -->
      <script th:src="@{/xray/js/jquery.magnific-popup.min.js}"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script th:src="@{/xray/js/smooth-scrollbar.js}"></script>
      <!-- Chart Custom JavaScript -->
      <script th:src="@{/xray/js/chart-custom.js}"></script>
      <!-- Custom JavaScript -->
      <script th:src="@{/xray/js/custom.js}"></script>
   </body>
</html>